<template>
  <div class="goods-detail">
    <van-nav-bar title="商品详情页" class="nav-bar" left-arrow @click-left="$router.go(-1)"/>
    <div class="container">
      <div class="my-swipe">
        <van-swipe
          :autoplay="3000"
          indicator-color="black"
          @change="onChange"
        >
          <van-swipe-item v-for="item in goodsDetail.image" :key="item.file_id">
            <img v-lazy="item.cover" alt=""/>
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ swipe.current + 1 }}/{{
                (goodsDetail.image?.length ?? 0)
              }}
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="detail-container">
        <div class="info">
          <div class="price">
            <span class="current-price">{{ goodsDetail.goods_price_min }}</span>
            &nbsp;
            <span class="origin-price">¥{{ goodsDetail.line_price_min }}</span>
          </div>
          <span class="sale">已售{{ goodsDetail.goods_sales }}件</span>
        </div>
        <h3 class="title text-ellipsis-2">{{ goodsDetail.goods_name }}</h3>
      </div>
      <div class="server">
        <van-cell class="server-detail" is-link @click="show = true">
          <van-icon name="certificate" class="icon"/>
          七天无理由 &nbsp;
          <van-icon name="certificate" class="icon"/>
          48小时发货
        </van-cell>
        <van-action-sheet v-model="show" title="服务">
          <div class="content">
            <div class="server-item">
              <h3>
                <van-icon name="certificate"/>
                七天无理由退货
              </h3>
              <span>满足相应条件时，消费者可申请7天无理由退货</span>
            </div>
            <div class="server-item">
              <h3>
                <van-icon name="certificate"/>
                48小时发货
              </h3>
              <span>下单后48小时之内发货</span>
            </div>
          </div>
        </van-action-sheet>
      </div>
      <div class="evaluate">
        <van-cell is-link @click="showPopup">
          <div class="evaluate-detail">
            <span class="evaluate-num">商品评价(10条)</span>
            <span class="more">查看更多</span>
          </div>
        </van-cell>
        <div class="evaluate-list">
          <div class="item">
            <div class="user-info">
              <van-image
                round
                width="37px"
                height="37px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <span>生无可恋</span>
              <van-rate
                v-model="value"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="evaluate-info">
              <span class="evaluate-center">这个太辣了</span>
              <span class="evaluate-item">2023-03-24 09:20:38</span>
            </div>
          </div>

          <div class="item">
            <div class="user-info">
              <van-image
                round
                width="37px"
                height="37px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <span>生无可恋</span>
              <van-rate
                v-model="value"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="evaluate-info">
              <span class="evaluate-center">这个太辣了</span>
              <span class="evaluate-item">2023-03-24 09:20:38</span>
            </div>
          </div>

          <div class="item">
            <div class="user-info">
              <van-image
                round
                width="37px"
                height="37px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
              <span>生无可恋</span>
              <van-rate
                v-model="value"
                :size="25"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="evaluate-info">
              <span class="evaluate-center">这个太辣了</span>
              <span class="evaluate-item">2023-03-24 09:20:38</span>
            </div>
          </div>
        </div>
      </div>
      <div class="desc">
        <div class="title">
          <span>商品描述</span>
        </div>
        <div class="rich-box" v-html="goodsDetail.content"></div>
      </div>
    </div>
    <div class="tabbar">
      <!-- 二级路由出口 -->
      <van-tabbar z-index="999" route active-color="#ee0a24" inactive-color="#000">
        <van-tabbar-item icon="wap-home-o" to="/home" class="home-item">首页</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/cart" class="cart-list">购物车</van-tabbar-item>
        <van-tabbar-item class="cart-item">
          <van-button
            @click="addFn('cart')"
            round
            color="#f4bb40"
            size="small" type="primary">
            加入购物车
          </van-button>
        </van-tabbar-item>
        <van-tabbar-item class="buy-item">
          <van-button
            @click="addFn('buyNow')"
            round
            color="#ec6742"
            size="small"
            type="primary">
            立即购买
          </van-button>
        </van-tabbar-item>
      </van-tabbar>
      <!--购物车弹出-->
      <div class="cart">
        <van-action-sheet
          v-model="cartShow"
          :title="mode === 'cart' ? '加入购物车' : '立刻购买'"
        >
          <div class="product">
            <div class="product-title">
              <div class="left">
                <img :src="goodsDetail.goods_image" alt="">
              </div>
              <div class="right">
                <div class="price">
                  <span>¥</span>
                  <span class="nowprice">9.99</span>
                </div>
                <div class="count">
                  <span>库存</span>
                  <span>55</span>
                </div>
              </div>
            </div>
            <div class="num-box">
              <span>数量</span>
              数字框占位
            </div>
            <div class="showbtn" v-if="goodsDetail.stock_total > 0">
              <div class="btn" v-if="mode ==='cart'">加入购物车</div>
              <div class="btn now" v-else>立刻购买</div>
            </div>
            <div class="btn-none" v-else>该商品已抢完</div>
          </div>
        </van-action-sheet>
      </div>
    </div>
  </div>
</template>
<script>
import { queryGoodsDetail } from '@/api/goods'

export default {
  data () {
    return {
      goodsId: '',
      value: 3,
      show: false,
      cartShow: false,
      mode: 'buyNow',
      swipe: {
        current: 0
      },
      goodsDetail: {}
    }
  },
  methods: {
    addFn (name) {
      this.mode = name
      this.cartShow = true
    },
    onChange (value) {
      this.swipe.current = value
    },
    showPopup () {
      this.show = true
    },
    async queryGoods (goodsId) {
      this.goodsDetail = await queryGoodsDetail({ goods_id: goodsId })
    }
  },
  created () {
    this.goodsId = this.$route.query.goodsId
  },
  mounted () {
    this.queryGoods(this.goodsId)
  }
}
</script>

<style lang="less" scoped>
.goods-detail {
  background: #fafafa;
  padding-top: 46px;

  ::v-deep .van-nav-bar {
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
    background: #fff;
  }

  .container {
    .my-swipe {
      padding-bottom: 10px;

      .van-swipe-item {
        font-size: 0;
        text-align: center;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .custom-indicator {
        width: 40px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 12px;

        position: absolute;
        bottom: 10px;
        transform: translateX(-50%);
        left: 50%;

      }
    }

    .detail-container {
      margin: 0 10px;
      background: white;
      padding-bottom: 10px;

      .info {
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;

        .price {
          .current-price::before {
            content: '¥';
            font-size: 12px;
            color: red;
          }

          .current-price {
            color: red;
            font-size: 21px;
          }

          .origin-price {
            color: #959595;
            font-size: 12px;
          }
        }

        .sale {
          color: #959595;
          font-size: 12px;
        }

      }

      .title {
        margin-top: 10px;
        color: #303133;
        font-size: 14px;
        //height: 42px;
        word-break: break-all;
      }
    }

    .server {
      font-size: 21px;
      margin-top: 10px;

      .van-cell::after {
        border: none;
      }

      .van-cell {
        height: 100%;
        width: 100%;
        align-items: center;
        background-color: white;
      }

      .van-action-sheet__content {
        .content {
          padding: 16px 16px 160px;
          height: 100%;
          width: 100%;

          .server-item {
            margin-top: 20px;

            h3 {
              font-size: 19px;
              font-weight: 300;
            }

            span {
              font-size: 14px;
              color: #6d6d6d;
            }
          }

        }
      }

      .icon {
        color: red;
      }

    }

    .evaluate {
      padding-bottom: 20px;

      .evaluate-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .evaluate-num {
          font-size: 14px;
        }

        .more {
          font-size: 12px;
          color: #999;
        }
      }

      .evaluate-list {
        margin: 10px;

        .user-info {
          display: flex;
          column-gap: 10px;
          align-items: center;

          span {
            font-size: 17px;
          }
        }

        .item {
          background: white;
          margin-bottom: 5px;
          padding: 10px 0;
        }

        .evaluate-info {
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          row-gap: 10px;
          align-items: flex-start;

          .evaluate-center {
            font-size: 17px;
          }

          .evaluate-item {
            font-size: 14px;
            color: #999;
          }
        }
      }
    }

    .desc {
      margin: 10px 0 50px 0;
      background: white;
      padding: 10px 0;

      .title {
        margin: 20px 0;
        font-size: 18px;
        font-weight: normal;
      }

    }

  }

  .tabbar {
    .home-item {
      flex: 2;
    }

    .cart-list {
      flex: 2;
    }

    .cart-item {
      flex: 3
    }

    .buy-item {
      flex: 3
    }
  }

  .cart {
    .product {
      .product-title {
        display: flex;

        .left {
          img {
            width: 90px;
            height: 90px;
          }

          margin: 10px;
        }

        .right {
          flex: 1;
          padding: 10px;

          .price {
            font-size: 14px;
            color: #fe560a;

            .nowprice {
              font-size: 24px;
              margin: 0 5px;
            }
          }
        }
      }

      .num-box {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        align-items: center;
      }

      .btn, .btn-none {
        height: 40px;
        line-height: 40px;
        margin: 20px;
        border-radius: 20px;
        text-align: center;
        color: rgb(255, 255, 255);
        background-color: rgb(255, 148, 2);
      }

      .btn.now {
        background-color: #fe5630;
      }

      .btn-none {
        background-color: #cccccc;
      }
    }
  }
}

</style>
